|
|
|
|
|
|
|||||||||
|
7.0 |
8.0 |
9.0 |
7.0 |
8.0 |
10.0 |
10.5 |
11.0 |
3.1 |
4.0 |
5.0 |
3.0 |
3.6 |
4.0 |
|
Ні |
Ні |
Так |
Так |
Так |
Ні |
Так |
Так |
Ні |
Ні |
Так |
Ні |
Ні |
Так |
Коротка інформація
|
CSS |
CSS3 |
|
Значення за
умовчанням |
auto |
|
Наслідує |
Ні |
|
Застосовується |
До всіх елементів |
|
Аналог HTML |
Нема |
|
Посилання на
специфікацію |
http://www.w3.org/TR/css3-background/#the-backgroundsize |
Опис
Масштабує фонове
зображення згідно із заданими розмірами.
Синтаксис
background - size: [
<значення> | <відсотки> | auto ]{1,2} | cover | contain
Значення
|
значення |
Задає розмір у
будь-яких доступних для CSS одиницях - піксели (px), сантиметри (cm), em та
ін. |
|
Відсотки |
Задає розмір фонової
картинки у відсотках від ширини або висоти елементу. |
|
Auto |
Якщо задано
одночасно для ширини і висоти (auto auto), розміри фону залишаються
початковими; якщо тільки для
однієї сторони картинки (100px auto), то розмір обчислюється автоматично виходячи з
пропорцій картинки. |
|
Cover |
Масштабує зображення
зі збереженням пропорцій так, щоб його ширина або висота дорівнювала ширині
або висоті блоку. |
|
contain |
Масштабує зображення
зі збереженням пропорцій так, щоб картинка цілком помістилася всередину
блоку. |
Якщо встановлено одно
значення, воно задає ширину фону, другого значення набуває за auto. Пропорції картинки
при цьому
зберігаються. Використання двох значень через пропуск задає ширину і висоту
фонової картинки.
Приклад
HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html;
charset=utf-8" />
<title>background-size</title>
<style type="text/css">
div {
height: 200px; /* Висота блоку */
border: 2px solid #000; /* Параметри рамки */
background: url('mybg.gif') 100% 100% no-repeat; /* Добавляємо фон */
background-size:
cover; /*
Масштиабуємо фон */
} </style>
</head>
<body>
<div>Луцький
національний технчний університет є одним із найкращих професійних закладів
освіти у місті Луцьку</div>
</body>
</html>
Браузери
Firefox до версії 4.0
використовує нестандартну властивість - moz - background - size.
Safari і Chrome
використовують нестандартну властивість - webkit - background - size.
